<template>
  <div>
    <button @click="handleMinus">-</button>
    {{ count }} | {{ state.count }}
    <button @click="handleAdd">+</button>
    <child></child>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { useCount } from './hooks/useCount'
import Child from './components/Child'

export default {
  components: {
    Child
  },
  setup () {
    const { count, handleMinus, handleAdd } = useCount()

    const state = reactive({ // 可以统一化处理
      name: 'lisa',
      count
    })

    return {
      state,
      count,
      handleMinus,
      handleAdd
    }
    //   const count = ref(0)
    //   const state = reactive({
    //     count
    //   })

    //   const handleMinus = () => {
    //     count.value--
    //   }
    //   const handleAdd = () => {
    //     count.value++
    //   }

    //   return {
    //     state,
    //     count,
    //     handleMinus,
    //     handleAdd
    //   }
  }
}
</script>
